import Taro from '@tarojs/taro'
import { View, Image, Swiper, SwiperItem } from '@tarojs/components'

import banner1 from '../../../../assets/homeImg/bannerImg/banner1.jpg'
import banner2 from '../../../../assets/homeImg/bannerImg/banner2.jpg'
import banner3 from '../../../../assets/homeImg/bannerImg/banner3.jpg'
import banner4 from '../../../../assets/homeImg/bannerImg/banner4.jpg'

import './index.scss'

const bannerData = [
  {
      uri: banner1,
  },
  {
      uri: banner2,
  },
  {
      uri: banner3,
  },
  {
      uri: banner4,
  },
  {
      uri: banner4,
  }
]

function Index () {
  function redirect () {
    Taro.navigateTo({
      url: '/pages/detail/index'
    })
  }

  return (
    <View className="banner-container">
      <Swiper className="banner-swipers" autoplay indicatorDots>
        {
          bannerData.map(item => (
            <SwiperItem className='banner-swipers-item'>
              <Image className="banner-image" src={item.uri} onClick={redirect} />
            </SwiperItem>
          ))
        }
      </Swiper>
  </View>
  )
}

export default Index
